<template>
    <!--问题: 我们不知道什么时候能够拿到 max 值,但是,总归有一刻,会得到一个真正的 max 值
    我们可以 使用watch 属性监听,来监听父组件传递过来的 max 值,不管 watch  会被触发几次,但是,最后一次,肯定是一个 合法的 max 数值
    -->
    <div class="mui-numbox" data-numbox-min='1'>
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <!--@change是用来监听文本框内容的改变-->
        <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox" />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script type="text/ecmascript-6">

    import mui from '../../lib/mui/js/mui.min'
    export default {
        name: 'GoodsInfo_NumBox',
        data() {
            return {}
        },
        mounted() {
            //插件 初始化
            mui('mui-numbox').numbox()
        },
        methods: {
            countChanged() {
                //每当 文本框的数据被修改的时候,立即把 最新的数据,通过事件调用,传递给父组件
                console.log(this.$refs.numbox.value)
                //回调函数响应,回调传参
                this.$emit("getcount",parseInt(this.$refs.numbox.value));
            }
        },
        props: ['max'],
        watch: {
            //属性监听
            max: function (newVal,oldVal) {
                //使用 JS API 设置 numbox 的最大值
                mui(".mui-numbox").numbox().setOption("max",newVal);
            }
        }
    }
</script>


<style lang="scss" rel="stylesheet/scss" scoped>

</style>